<template>
    <!-- VIX指数 -->
    <section class="vixIndex">
        <p class="font-44 font-600 mb-210">比特币VIX指数</p>
        <main class="vixIndex-box">
            <dashboard :value="value" />
            <div class="box-content">
                <div class="content-top flex justify-between" style="color: #fff;">
                    <p>保持关注</p>
                </div>
                <div class="content-center flex justify-between">
                    <p class="center-left">持有</p>
                    <p class="center-right">买入</p>
                </div>
                <div class="content-bottom flex justify-between">
                    <p class="bottom-left">观望</p>
                    <p class="bottom-right">积极买入</p>
                </div>
            </div>
            <div class="box-bootom">
                <p>保持关注</p>
            </div>
        </main>
        <footer class="vixIndex-footer">
            <div v-for="item in dataList" :key="item.id" class="flex justify-between">
                <p class="font-30">{{ item.title }}</p>
                <p class="font-30">
                    <span class="mr-20">{{ item.value }}天</span>
                    <span>({{ item.rate }}%)</span>
                </p>
            </div>
        </footer>
    </section>
</template>

<script>
import dashboard from './components/dashboard.vue'
export default {
    components:{
        dashboard,
    },
    data() {
        return {
            value:0.5,
            dataList:[
                {
                    id:0,
                    title:'观望',
                    value:'291',
                    rate:'12.11',
                },
                {
                    id:1,
                    title:'持有',
                    value:'780',
                    rate:'32.46',
                },
                {
                    id:2,
                    title:'保持关注',
                    value:'643',
                    rate:'26.76',
                },
                {
                    id:3,
                    title:'买入',
                    value:'560',
                    rate:'23.30',
                },
                {
                    id:4,
                    title:'积极买入',
                    value:'129',
                    rate:'5.37',
                },
            ]
        }
    },
    methods: {
       
    },
}
</script>

<style lang="scss" scoped>
.vixIndex{
    background-color: #141416;
    padding: 20px;
    border-radius: 18px;
    .vixIndex-box{
        display: flex;
        justify-content: center;
        position: relative;
        left: 0;
        top: 0;
        .box-content{
            width: 100%;
            position: absolute;
            left: 0;
            top: -50px;
            color: #e0e0e0;
            .content-top{
                display: flex;
                justify-content: center;
                margin-bottom: 40px;
            }
            .content-center{
                margin-bottom: 65px;
                .center-left{
                    width: 190px;
                    text-align: right;
                }
                .center-right{
                    width: 190px;
                    text-align: left;
                }
            }
            .content-bottom{
                .bottom-left{
                    width: 160px;
                    text-align: right;
                }
                .bottom-right{
                    width: 160px;
                    text-align: left;
                }
            }
        }
        .box-bootom{
            position: absolute;
            bottom: 140px;
            left: 50%;
            transform: translateX(-50%);
        }
    }
    .vixIndex-footer{
        padding: 50px 36px;
        border-radius: 10px;
        border: 1px solid #17181E;
        display: flex;
        flex-direction: column;
        gap: 32px;
    }
}
</style>